<template>
<!--    发布评论用到的代码-->
    <el-row :gutter="24">
        <el-col :span="1" >
            <el-avatar class="imgclass" :src="this.$method.getUrl(data.userHeader)"></el-avatar>
        </el-col>
        <el-col :span="22" style="margin-left: 25px">
            <el-row :gutter="24">
                <a class="nameclass" href="javascript:void(0)">{{data.userName}}</a>
                <span v-for="name in data.messageRole" class="roleclass">{{name}}</span>
                <span class="timeclass">{{this.$method.getTimeShow(data.createTime)}}</span>
            </el-row>
            <el-row :gutter="24" style="margin-top: 10px">
                <span class="contentclass">{{data.content}}</span>
            </el-row>
            <el-row :gutter="24" style="padding-left: 10px;margin-top: 20px;margin-bottom: 20px">
                <a href="javascript:void 0" @click="topicShow(data.id)" class="blog">回复</a>  <a href="javascript:void 0" class="blog">举报</a>
            </el-row>
                <WriteTopic :show="showTopic" :ref="data.id" :topic-info="data" v-on:updateData="updateData"></WriteTopic>
            <SubMessage :message-data="data.subMessageBoard"></SubMessage>
        </el-col>
    </el-row>
</template>

<script>
    import SubMessage from "./SubMessage";
    import WriteTopic from "./WriteTopic";
    export default {
        name: "TopicContent",
        components: {WriteTopic, SubMessage},
        props:{
            data:{Object,default:{}}
        } ,
        data(){
            return{
                showTopic:true
            }
        },
        methods:{
            topicShow(id){
                this.$refs[id].changeDis();
            },
            updateData(val){
               this.data.subMessageBoard.unshift(val);

            }
        }
    }
</script>

<style>
    .roleclass{
        margin-left: 10px;
        background-color:#fef0f0 ;
        color: #f56c6c;
        padding: 5px 8px;
        border: 1px solid #fde2e2;
        border-radius: 4px;
    }
    .imgclass{
        float: left;
        transform: scale(1.2);
    }
    .nameclass{
        vertical-align: top;
        margin-left: 10px;
        padding-top: 5px;
        font-weight: bolder;
        font-size: 16px;
        color: #000000;
    }
    .timeclass{
        font-size: 12px;
        vertical-align: top;
        padding-left: 15px;
    }
    .contentclass{
        padding-left: 10px;
    }
    .blog{
        margin-right: 20px;
    }
    .blog:hover{
        color: #1989fa;
    }
</style>